<template>
  <div class="box">
    <!-- logo -->
    <div></div>
    <!-- 表单 -->
    <div class="f">
      <div class="left">
        <div class="img">
          <img src="../img/login/后台登录页面大logo.png" alt />
        </div>
        <p>OMINI回收·门店端</p>
      </div>

      <div class="right">
        <div class="rightBox">
          <p>{{ title }}</p>
          <el-input
            v-show="flag == false"
            v-model="input1"
            class="w-50 m-2 inp"
            size="large"
            placeholder="请输入用户名/手机号"
            max="100px"
          ></el-input>
          <el-input
            v-show="flag == false"
            v-model="input2"
            class="w-50 m-2 inp"
            size="large"
            placeholder="请输入密码"
            max="100px"
          />

          <el-input
            v-show="flag == true"
            v-model="phone"
            class="w-50 m-2 inp1"
            size="large"
            placeholder="请输入手机号"
            max="100px"
          ></el-input>
          <el-input
            v-show="flag == true"
            v-model="yz"
            class="w-50 m-2 inp1"
            size="large"
            placeholder="请输入6位验证码"
            max="100px"
          />
          <el-input
            v-show="flag == true"
            v-model="password"
            class="w-50 m-2 inp1"
            size="large"
            placeholder="请输入修改后的密码"
            max="100px"
          ></el-input>
          <el-input
            v-show="flag == true"
            v-model="rPassword"
            class="w-50 m-2 inp1"
            size="large"
            placeholder="请确认修改后的密码"
            max="100px"
          />

          <div @click="fun1" class="p1">{{ wangJi }}</div>
          <el-popover :visible="visible" placement="top" :width="160">
            <p style="width = 400px">用户名或密码错误请重试?</p>

            <template #reference>
              <el-button
                v-show="flag == false"
                @click="fun"
                type="primary"
                size="large"
                round
                color="#5E72E4"
              >登录</el-button>
            </template>
          </el-popover>
          <el-popover :visible1="visible1" placement="top" :width="160">
            <p style="width = 400px">{{zhaH}}</p>

            <template #reference>
              <el-button
                class="btn2"
                v-show="flag == true"
                @click="fun2"
                type="primary"
                size="large"
                round
                color="#5E72E4"
              >保存并登录</el-button>
            </template>
          </el-popover>

          <el-button @click="fun3" v-show="flag == false" class="btn1" size="large" round>立即注册门店</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { Login } from "../api/index";
const input1 = ref("");
const input2 = ref("");
const router = useRouter();

// token
const tokenObj = ref({
  token: "asdasd"
});
// 弹出层函数封装
const Tc = () => {
  visible1.value = true;
  setTimeout(function() {
    visible1.value = false;
  }, 1000);
};
// 验证
const fun = () => {
  if (input1.value == "" && input2.value == "") {
    visible.value = true;
    setTimeout(function() {
      visible.value = false;
    }, 1000);
  } else {
    Login().then(res => {
      const data = res.data.data.token.eid;
      localStorage.setItem("token", JSON.stringify(data));
      router.push("/");
    });
  }
};

// 找回密码
const phone = ref();
const yz = ref();
const password = ref();
const rPassword = ref();
const ze = /\d{11}/;
const zhaH = ref("");
const visible1 = ref(false);
const fun2 = () => {
  if (phone.value !== ze.test(phone) && phone.value == undefined) {
    zhaH.value = "手机格式错误";
    Tc();
  } else if (yz.value == undefined) {
    zhaH.value = "验证码不正确";
    Tc();
  } else if (password.value == undefined || rPassword.value == undefined) {
    zhaH.value = "密码不能为空";
    Tc();
  } else if (password.value !== rPassword.value) {
    zhaH.value = "俩次密码不一致";
    Tc();
  } else {
    zhaH.value = "注册成功";
    Tc();
    setTimeout(function() {
      router.push("/");
    }, 1000);
  }
};
// 弹出层
const visible = ref(false);

// 忘了密码
const title = ref("门店登录");
const wangJi = ref("忘记密码");

const flag = ref(false);
const fun1 = () => {
  flag.value = !flag.value;
  wangJi.value = flag.value ? "回到登录页" : "忘记密码";
  title.value = flag.value ? "找回密码" : "门店登录";
};

const fun3 = () => {
  router.push("/Register");
};
</script>

<style lang="less" scoped>
body,
html {
  width: 100%;
  height: 100vh;
  .box {
    width: 100%;
    min-height: 100vh;
    background-color: #5e72e4;
    .f {
      width: 800px;
      height: 490px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -400px;
      margin-top: -245px;

      .left {
        height: 453px;
        background-color: #fff;
        margin-top: 15px;
        border-radius: 16px;
        p {
          font-weight: 600;
          text-shadow: 1px 1px 4px rgb(0 0 0 / 65%);
          font-size: 32px;
          margin-left: 50px;
          line-height: 305px;
        }
        .img {
          position: relative;
          top: 108px;
          left: 138px;
        }
      }
      .rightBox {
        width: 350px;
        height: 450px;
        margin: 0 auto;
        border-top: 1px solid transparent;
      }
      .right {
        position: relative;
        height: 100%;
        width: 400px;
        background-color: #fff;
        top: -468px;
        left: 400px;
        border-radius: 16px;
        border-top-left-radius: 0px 0px;
        border-bottom-left-radius: 0px;
        box-shadow: -2px 5px 10px rgb(0 0 0 / 35%);
        p {
          font-size: 24px;
          font-weight: 700;
          text-shadow: 1px 1px 4px rgb(0 0 0 / 65%);
          margin-top: 63px;
        }
        .inp {
          margin-top: 30px;
        }
      }
    }
  }
}
.p1 {
  font-size: 14px;
  color: #f5365c;
  float: right;
  margin-top: 20px;
  margin-right: 5px;
  margin-bottom: 20px;
}
button {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}
.btn1 {
  margin-top: 20px;
  position: relative;
  left: -10px;
  color: #5e72e4;
  font-size: 16px;
  font-weight: 600;
}
.btn2 {
  margin-top: 20px;
  position: relative;
  left: -10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.inp1 {
  margin: 10px 0px;
}
.element.style {
  inset: none;
}
</style>
